<!-- 学时消费明细 -->
<template>
	<view>
		<!-- 自定义导航栏 -->
		<view class="navBarBox">
			<!-- 状态栏占位 -->
			<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
			<!-- 真正的导航栏内容 -->
			<view class="navBar">
				<view class="goback">
					<view @click="goBack" class="goicon" style="background:url(../../../static/goback.png);background-size:contain;background-repeat: no-repeat;">			
					</view>
				</view>
				<view class="title">充值明细</view>
				<view class="right">
					
				</view>
			</view>
		</view>
		<!-- 页面内容 -->
		<view class="box">
			<view class="box2">
				<view class="list">
					<view class="img"></view>
					<view class="shop">
						<span class="describe">充值1000元购买课程</span>
						<span class="time">2019-08-24</span>
					</view>
					<view class="money">
						<span>
							+50
						</span>
					</view>
				</view>
				<view class="list">
					<view class="img"></view>
					<view class="shop">
						<span class="describe">充值1000元购买课程</span>
						<span class="time">2019-08-24</span>
					</view>
					<view class="money">
						<span>
							+50
						</span>
					</view>
				</view>
				<view class="list">
					<view class="img"></view>
					<view class="shop">
						<span class="describe">充值1000元购买课程</span>
						<span class="time">2019-08-24</span>
					</view>
					<view class="money">
						<span>
							+50
						</span>
					</view>
				</view>
				<view class="list">
					<view class="img"></view>
					<view class="shop">
						<span class="describe">充值1000元购买课程</span>
						<span class="time">2019-08-24</span>
					</view>
					<view class="money">
						<span>
							+50
						</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 状态栏高度
				statusBarHeight: 0,
				// 导航栏高度
				navBarHeight: 82 + 11,
			};
		},
		props: {

		},
		//第一次加载时调用
		created() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		},
		methods:{
			goBack(){
				// 此处是写返回页面的方法、
							
				uni.navigateBack({
				    delta: 1//返回只上一级页面
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.navBarBox {}

	.navBarBox .statusBar {}

	.navBarBox .navBar {
		padding: 3rpx 50rpx;
		padding-bottom: 8rpx;
		display: flex;
		justify-content: space-between;

		line-height: 93rpx;
		font-size: 40rpx;
	}

	.goback {
		flex: 1;
		height: 100%;
	}
	.goicon{
		width: 30rpx;
		height: 30rpx;
		background-color: #00BEA9;
		margin-top: 30rpx;
	}
	.title {
		flex: 2;
		height: 100%;
		
	}
	.right{
		flex: 1;
	}
	.box{
		background-color: #fafafa;
	}
	.box2{
		margin-top: 20rpx;
	}
	.list{
		height: 136rpx;
		width: 100%;
		border-bottom: 1rpx #eeeeee solid;
		background-color: #ffffff;
		overflow: hidden;
		// background-color: #F0AD4E;
		display: flex;
		flex-direction: row;
		.img{
			float: left;
			height: 72rpx;
			width: 72rpx;
			border-radius: 36rpx;
			background-color: red;
			margin-left: 32rpx;
			margin-top: 35rpx;
		}

		.shop .describe{
			font-size: 31rpx;
			color: rgb(47,55,66);
			margin-top: 40rpx;
			display: block;
			margin-left: 16rpx;
		}
		.shop .time{
			font-size: 22rpx;
			color: rgb(157,166,178);
			display: block;
			margin-left: 16rpx;
		}
		.money span{
			display: block;
			color: rgb(255,91,40);
			margin-top: 56rpx;
			margin-left: 250rpx;
		}
		
	}
</style>

